<template>
    <HomeOver>
        <div v-for="news in newses" :key="news.id">
            <div class="container content-field">
                    <div class="card">
                        <div class="card-body">
                                <img class="img" :src="news.photo" alt="">
                                <span class="user">{{news.userName}}</span>                     
                            <pre class="clock">{{ news.date }}</pre>
                        </div>
                        <div class="jj">
                            {{ news.take }}
                        </div>
                        <div>
                            <hr>
                            <div class="s1">♡  &nbsp; 赞</div>
                            <div class="s2">💬 &nbsp; 评论</div>
                            <div class="s3">☆  &nbsp; 收藏</div>
                            
                            <hr>
                        </div>
                    </div>
                </div>
            </div>  
    </HomeOver>
</template>

<script>
import HomeOver from "../components/HomeOver.vue"
import $ from "jquery";
import { useStore } from "vuex";
import { ref } from "vue";


export default{
    components:{
        HomeOver,
    },
    setup(){
        let store = useStore();
        let newses = ref([]);
        const new_info  = ()=> {
            $.ajax({
                url:"http://localhost:3000/api/take/info/",
                type:"get",
                headers:{
                    Authorization: "Bearer "+store.state.user.token,//授权 
                    //Authentication 认证  
                },
                success(resp){
                   console.log(resp)
                   newses.value = resp;
                }
             })
         }
         new_info();

        
         return{
            newses,

         }
    }
    
}
</script>

<style scoped>
.s1{
    display:inline-block;
    cursor: pointer;
    font-family:Arial,'宋体';
    font-weight: 600;
    font-size: 16px;
    margin-top: 5px;
    margin-left: 580px;
}
.s2{
    display:inline-block;
    cursor: pointer;
    font-family:Arial,'宋体';
    font-weight: 600;
    font-size: 16px;
    margin-top: 5px;
    margin-left:80px;

}
.s3{
    display:inline-block;
    cursor: pointer;
    font-family:Arial,'宋体';
    font-weight: 600;
    font-size: 16px;
    margin-top: 5px;
    margin-left: 80px;

}
.nav-link{
    display:inline-block;
}
.clock{
    font-family:Arial,'幼圆';
    margin-left: 700px;
}
.user{
    font-family:Arial,'方正舒体';
    margin-left: 20px;
    font-size: 20px;
    font-style: 600;
}
.jj{
    font-family:Arial,'楷体';
    margin-right: 80px;
    margin-top: 10px;
    margin-left: 80px;
    margin-bottom: 20px;
}
.content-field{
    margin-top: 30px;
}
.img{
    margin-left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
</style>